import { Card, Tag } from "@/components/base";
import { Typography } from "@/components/typography";
import { Flex } from "@/components/flex";
import { MailOutlined, PhoneOutlined } from '@ant-design/icons';
import { PageController } from '../../page-controller';
import { useObserver } from "mobx-react-lite";
import React from "react";
import dayjs from "dayjs";
import * as dataDictionary from "@shared/constant/dataDictionary";

const { Text } = Typography;

export function BasicInfo() {

    const pageController = React.useContext(PageController.Context);
    const data = useObserver(() => pageController.data);

    return (
        <Card style={{ marginBottom: '16px' }}>
            <Flex gap={16} style={{ marginBottom: '16px' }}>
                <div style={{
                    width: '60px',
                    height: '60px',
                    borderRadius: '50%',
                    backgroundColor: '#f0f0f0',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: '24px',
                    color: '#999'
                }}>
                    {data?.name?.[0] || '*'}
                </div>
                <Flex vertical style={{ flex: 1 }}>
                    <Flex align="center" gap={8} style={{ marginBottom: '4px' }}>
                        <Text size={20} strong>{data?.name}</Text>
                        <Tag color="#52c41a">活跃</Tag>
                    </Flex>
                    {
                        data?.phone && (
                            <Text 
                                size={14} 
                                type="secondary"
                                style={{ 
                                    cursor: 'pointer',
                                    color: '#1890ff'
                                }}
                                onClick={() => {
                                    if (data.phone) {
                                        window.location.href = `tel:${data.phone}`;
                                    }
                                }}
                            >
                                <PhoneOutlined style={{ marginRight: '4px' }} />
                                {data.phone}
                            </Text>
                        )
                    }
                    {
                        data?.email && (
                            <Text 
                                size={14} 
                                type="secondary"
                                style={{ 
                                    cursor: 'pointer',
                                    color: '#1890ff'
                                }}
                                onClick={() => {
                                    if (data.email) {
                                        window.location.href = `mailto:${data.email}`;
                                    }
                                }}
                            >
                                <MailOutlined style={{ marginRight: '4px' }} />
                                {data.email}
                            </Text>
                        )
                    }
                    <Text size={14} type="secondary">
                        {dataDictionary.genderStr[data?.gender] ? `${dataDictionary.genderStr[data?.gender]} •  ` : ''}{data?.age? `${data?.age}岁 • `: ''}
                        入会时间：{dayjs(data?.createdAt).format('YYYY-MM-DD')}
                    </Text>
                </Flex>
            </Flex>

            <div style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1fr',
                gap: '16px',
                paddingTop: '16px',
                borderTop: '1px solid #f0f0f0'
            }}>
                <Flex vertical align="center">
                    <Text size={24} strong style={{ color: '#e91e63' }}>
                        999
                    </Text>
                    <Text size={12} type="secondary">累计次数</Text>
                </Flex>
                <Flex vertical align="center">
                    <Text size={24} strong style={{ color: '#52c41a' }}>
                        ¥999.00
                    </Text>
                    <Text size={12} type="secondary">累计消费</Text>
                </Flex>
            </div>
        </Card>
    );
}
